<template>
  <div>
    <van-tabs v-model="activeKey" @change="onChange">
      <van-tab title="全部">
        <div id="OrderHead">
          <div class="OrderList" v-for="(item,index) in orderList" :key="index">
            <div class="OrderList1">
              <van-icon name="underway" class="OrderInco"/>
              <span>{{
                  item.orderTime.dayOfTheWeek
                }} &emsp;完成时间:&ensp;&ensp;{{ formattedTime(item.orderTime.destinationTime) }}</span>
              <div class="OrderList11"
                   @click="toOrderDeatil(item.orderInformation.orderStatus,item.orderInformation.orderId,item.orderInformation.driverId)">
                <span v-if="item.orderInformation.orderStatus==0" style="font-size: 20px;color: red">未接单</span>
                <span v-if="item.orderInformation.orderStatus==1" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==2" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==3" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==4" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==6" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==7" style="font-size: 20px;color: #969696">已完成</span>
                <van-icon name="arrow"/>
              </div>
            </div>
            <div class="OrderList2">
              <div class="OrderList22"></div>
              <span>{{ item.orderInformation.startingPointAddress }}</span>
            </div>
            <div class="OrderList3">
              <div class="OrderList33"></div>
              <span>{{ item.orderInformation.destinationAddress }}</span>
            </div>
            <div class="OrderList4">
              <div class="OrderList44">
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="toChat(item.orderInformation.driverId)">消息</van-button>
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="complaint(item.orderCost.orderId,item.orderInformation.driverId)">
                  投诉
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="代付款">
        <div id="OrderHead">
          <div class="OrderList" v-for="(item,index) in orderList" :key="index">
            <div class="OrderList1">
              <van-icon name="underway" class="OrderInco"/>
              <span>{{
                  item.orderTime.dayOfTheWeek
                }} &emsp;完成时间:&ensp;&ensp;{{ formattedTime(item.orderTime.destinationTime) }}</span>
              <div class="OrderList11"
                   @click="toOrderDeatil(item.orderInformation.orderStatus,item.orderInformation.orderId,item.orderInformation.driverId)">
                <span v-if="item.orderInformation.orderStatus==0" style="font-size: 20px;color: red">未接单</span>
                <span v-if="item.orderInformation.orderStatus==1" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==2" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==3" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==4" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==6" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==7" style="font-size: 20px;color: #969696">已完成</span>
                <van-icon name="arrow"/>
              </div>
            </div>
            <div class="OrderList2">
              <div class="OrderList22"></div>
              <span>{{ item.orderInformation.startingPointAddress }}</span>
            </div>
            <div class="OrderList3">
              <div class="OrderList33"></div>
              <span>{{ item.orderInformation.destinationAddress }}</span>
            </div>
            <div class="OrderList4">
              <div class="OrderList44">
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="toChat(item.orderInformation.driverId)">消息</van-button>
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="complaint(item.orderCost.orderId,item.orderInformation.driverId)">
                  投诉
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已完成">
        <div id="OrderHead">
          <div class="OrderList" v-for="(item,index) in orderList" :key="index">
            <div class="OrderList1">
              <van-icon name="underway" class="OrderInco"/>
              <span>{{
                  item.orderTime.dayOfTheWeek
                }} &emsp;完成时间:&ensp;&ensp;{{ formattedTime(item.orderTime.destinationTime) }}</span>
              <div class="OrderList11"
                   @click="toOrderDeatil(item.orderInformation.orderStatus,item.orderInformation.orderId,item.orderInformation.driverId)">
                <span v-if="item.orderInformation.orderStatus==0" style="font-size: 20px;color: red">未接单</span>
                <span v-if="item.orderInformation.orderStatus==1" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==2" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==3" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==4" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==6" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==7" style="font-size: 20px;color: #969696">已完成</span>
                <van-icon name="arrow"/>
              </div>
            </div>
            <div class="OrderList2">
              <div class="OrderList22"></div>
              <span>{{ item.orderInformation.startingPointAddress }}</span>
            </div>
            <div class="OrderList3">
              <div class="OrderList33"></div>
              <span>{{ item.orderInformation.destinationAddress }}</span>
            </div>
            <div class="OrderList4">
              <div class="OrderList44">
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="toChat(item.orderInformation.driverId)">消息</van-button>
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="complaint(item.orderCost.orderId,item.orderInformation.driverId)">
                  投诉
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="已取消">
        <div id="OrderHead">
          <div class="OrderList" v-for="(item,index) in orderList" :key="index">
            <div class="OrderList1">
              <van-icon name="underway" class="OrderInco"/>
              <span>{{
                  item.orderTime.dayOfTheWeek
                }} &emsp;完成时间:&ensp;&ensp;{{ formattedTime(item.orderTime.destinationTime) }}</span>
              <div class="OrderList11"
                   @click="toOrderDeatil(item.orderInformation.orderStatus,item.orderInformation.orderId,item.orderInformation.driverId)">
                <span v-if="item.orderInformation.orderStatus==0" style="font-size: 20px;color: red">未接单</span>
                <span v-if="item.orderInformation.orderStatus==1" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==2" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==3" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==4" style="font-size: 20px;color: #969696">已取消</span>
                <span v-if="item.orderInformation.orderStatus==6" style="font-size: 20px;color: red">代付款</span>
                <span v-if="item.orderInformation.orderStatus==7" style="font-size: 20px;color: #969696">已完成</span>
                <van-icon name="arrow"/>
              </div>
            </div>
            <div class="OrderList2">
              <div class="OrderList22"></div>
              <span>{{ item.orderInformation.startingPointAddress }}</span>
            </div>
            <div class="OrderList3">
              <div class="OrderList33"></div>
              <span>{{ item.orderInformation.destinationAddress }}</span>
            </div>
            <div class="OrderList4">
              <div class="OrderList44">
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="toChat(item.orderInformation.driverId)">消息</van-button>
                <van-button type="default" :disabled="item.orderInformation.orderStatus==0" @click="complaint(item.orderCost.orderId,item.orderInformation.driverId)">
                  投诉
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <BottomPanel/>
  </div>
</template>

<script>
import BottomPanel from "@/views/bottomPanel.vue";
import {orderList} from "@/api/order/orderList"

export default {
  components: {BottomPanel},
  data() {
    return {
      activeKey: 0,
      orderList: [],
      list: [],
      userId: window.localStorage.getItem('userId'),
    }
  },
  created() {
    this.activeKey = 0
    this.findOrderList()
  },
  methods: {
    formattedTime(time) {
      const date = new Date(time); // 将字符串转换为 Date 对象
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    //查找订单信息
    findOrderList() {
      orderList(this.userId).then(res => {
        this.orderList = res.data
        this.list = res.data
      })
    },
    onChange(index) {
      if (index == 0) {
        this.orderList = this.list
      } else if (index == 1) {
        //代付款
        this.orderList = this.list.filter(item => item.orderInformation.orderStatus == 1  || item.orderInformation.orderStatus == 2 || item.orderInformation.orderStatus == 6);
      } else if (index == 2) {
        //已完成
        this.orderList = this.list.filter(item => item.orderInformation.orderStatus == 7)
      } else {
        //已取消
        this.orderList = this.list.filter(item => item.orderInformation.orderStatus == 3 || item.orderInformation.orderStatus == 4)
      }
    },
    complaint(orderId, driverId) {
      this.$router.push({path: '/problemFeedback', query: {orderId: orderId, driverId: driverId}})
    },
    toOrderDeatil(orderStatus, orderId, driverId) {
      if (orderStatus == 1  || orderStatus == 2 || orderStatus == 6) {
        //未付款,需要支付
        this.$router.push({path: '/havePaid', query: {orderId: orderId, driverId: driverId}})
      } else if (orderStatus == 7) {
        //已付款,不需要支付
        this.$router.push({path: '/noPaid', query: {orderId: orderId, driverId: driverId}})
      }
    },
    //去消息页面
    toChat(driverId) {
      this.$router.push({path: '/chat', query: {driverId: driverId}})
    },
  },
}

</script>


<style>
#OrderHead {
  width: 100%;
  height: 90vh;
  overflow: auto; /* 开启滚动条 */
  background: #F3FCFF;
}

.OrderList {
  width: 98%;
  height: 170px;
  margin-top: 15px;
  background: white;
  margin-left: 5px;
}

.OrderList1 {
  width: 100%;
  height: 30px;
}

.OrderInco {
  display: inline-block;
  margin-top: 10px;
  margin-left: 20px;
  color: #919191;
}

.OrderList1 span {
  display: inline-block;
  margin-left: 20px;
}

.OrderList11 {
  float: right;
  display: inline-block;
  margin-top: 5px;
  margin-right: 20px;
}

.OrderList2 {
  width: 100%;
  height: 40px;
}

.OrderList22 {
  width: 10px;
  height: 10px;
  background: #009587;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
  margin-left: 25px;
  float: left;
}

.OrderList2 span {
  margin-top: 10px;
  width: 80%;
  display: inline-block;
  margin-left: 20px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.OrderList3 {
  width: 100%;
  height: 40px;
}

.OrderList33 {
  width: 10px;
  height: 10px;
  background: #F0A439;
  border-radius: 50%;
  display: inline-block;
  margin-top: 20px;
  margin-left: 25px;
}

.OrderList3 span {
  width: 80%;
  display: inline-block;
  margin-left: 20px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

.OrderList4 {
  width: 100%;
  height: 60px;
}

.OrderList44 {
  width: 260px;
  height: 50px;
  display: inline-block;
  float: right;
  margin-top: 10px;
}

.OrderList44 button {
  width: 100px;
  height: 30px;
  margin-left: 20px;
  border-radius: 20px;
  border: 1px solid #919191;
}
</style>